<!--  -->
<template>
  <div class="bankadd">
    <van-nav-bar @click-left="onClickLeft" title="添加银行卡" :left-arrow="true" />
    <div class="header">
      <h3 class="title">请绑定持卡人本人的银行卡</h3>
      <div class="tip">
        <img src="@/assets/img/bank/anquan.png" />
        将为您加密处理信息，请放心使用
      </div>
    </div>
    <div class="content">
      <van-field
        v-model="username"
        label-width="80px"
        name="银行"
        label="银行"
        placeholder="请输入银行"
        @click="show=true"
        clearable
        readonly
        :rules="[{ required: true, message: '请输入银行' }]"
      />
      <van-field
        v-model="username"
        label-width="80px"
        clearable
        name="持卡人"
        label="持卡人"
        placeholder="持卡人本人姓名"
        :rules="[{ required: true, message: '请输入持卡人本人姓名' }]"
      />
      <van-field
        v-model="id_card"
        label-width="80px"
        clearable
        name="卡号"
        label="卡号"
        placeholder="持卡人本人银行卡号"
        :rules="[{ required: true, message: '请输入持卡人本人银行卡号' }]"
      />
    </div>
    <van-button type="primary" class="next" disabled>下一步</van-button>

    <van-popup
      v-model="show"
      round
      position="bottom"
      closeable
      :sticky="false"
      :style="{ height: '72%' }"
    >
      <div class="popuptitle">选择银行</div>
      <div class="searchbox">
        <img src="@/assets/img/bank/search.png" />
        <van-field v-model="value" placeholder="搜索" />
      </div>
      <div class="popupcontent">
        <van-index-bar>
          <van-index-anchor index="A" />
          <van-cell title="文本" />
          <van-cell title="文本" />
          <van-cell title="文本" />

          <van-index-anchor index="B" />
          <van-cell title="文本" />
          <van-cell title="文本" />
          <van-cell title="文本" />
          <van-index-anchor index="c" />
          <van-cell title="文本" />
          <van-cell title="文本" />
          <van-cell title="文本" />
          <van-index-anchor index="d" />
          <van-cell title="文本" />
          <van-cell title="文本" />
          <van-cell title="文本" />
        </van-index-bar>
      </div>
    </van-popup>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "bankadd",
  },
  data() {
    //这里存放数据
    return {
      show: false,
      username: null,
      value: null,
      id_card: null,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    ["id_card"](val) {
      this.$nextTick(() => {
        this.id_card = val.replace(/\s/g, "").replace(/....(?!$)/g, "$& ");
      });
    },
  },
  //方法集合
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
/* //@import url(); 引入公共css类 */
.bankadd {
  width: 100%;
  height: 100%;
  background: #fafafa;
  overflow-y: auto;
  .header {
    padding: 19px 15px;
    .title {
      font-size: 19px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #20253a;
      letter-spacing: 1px;
    }
    .tip {
      margin-top: 10px;
      img {
        width: 13px;
        height: 15px;
        vertical-align: middle;
      }
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #9f9f9f;
    }
  }
  .content {
    margin-top: 6px;
  }
  .next {
    width: calc(100% - 30px);
    display: block;
    margin: 0 15px;
    background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
    border-radius: 5px;
    box-shadow: 0px 2px 4px 0px #ffd9d4;
    border: none;
    margin-top: 46px;
  }
  /deep/.van-button--disabled {
    background: #d8d8d8;
    border-radius: 5px;
    box-shadow: none;
  }
  .popuptitle {
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20253a;
    letter-spacing: 0px;
    text-align: center;
    line-height: 50px;
  }
  /deep/.van-popup__close-icon {
    font-size: 18px;
    color: #272c40;
  }
  .searchbox {
    background: #f7f7f7;
    border-radius: 5px;
    margin: 17px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    img {
      width: 12px;
      height: 12px;
      margin-top: 15px;
      margin-left: 11px;
    }
    /deep/.van-cell {
      background: rgba(255, 255, 255, 0);
      padding-left: 5px;
    }
  }
  .popupcontent {
    height: calc(100% - 130px);
    overflow: auto;

    /deep/.van-index-bar__sidebar {
      position: absolute;
      right: 10px;
      top: 295px;
    }
  }
}
</style>